<template>
  <div class="metaCollapse">
    <div v-for="(item,index) in mcDataList" :key="index" class="mc_categoryArea">
      <div class="mc_categoryTitleArea" @click="openCategory(index)">
        <div class="mc_categoryTitle">{{item[keys.k_title]}}</div>
        <div class="mc_categoryArrowArea">
          <i v-if="!item.open" class="el-icon-arrow-right"></i>
          <i v-else class="el-icon-arrow-down"></i>
        </div>
      </div>
      <div v-show="item.open" class="mc_dataItemArea">
        <div v-for="cItem in item[keys.k_children]" :key="cItem[keys.k_id]" class="mc_dataItemBg" @click="onChooseItem(cItem[keys.k_id])">
          <div class="mcDataItem_radioBtn">
            <div v-if="currentId === cItem[keys.k_id]" class="mcDataItemRadio_on"></div>
            <div v-else class="mcDataItemRadio_off"></div>
          </div>
          <div class="mcDataItem_name" :style="currentId === cItem[keys.k_id] ? 'color: #0efcff' : 'color: #fff'">{{cItem[keys.k_name]}}</div>
          <div v-if="keys.k_status && cItem[keys.k_status] === '0'" class="mcDataItem_status" style="color: red">报警</div>
          <div v-if="keys.k_status && cItem[keys.k_status] === '1'" class="mcDataItem_status" style="color: green">在线</div>
          <div v-if="keys.k_status && cItem[keys.k_status] === '2'" class="mcDataItem_status" style="color: grey">停用</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import deepClone from '../utils/deepClone'
export default {
  name: 'metaCollapse',
  props: {
    currentId: {
      type: String,
      default: ""
    },
    dataList: {
      type: Array,
      default: () => {
        return []
      }
    },
    /**
     * k_id - id【字段名】
     * k_title - 父节点名称【字段名】
     * k_children - 子节点集合【字段名】
     * k_name - 子节点名称【字段名】
     * k_status - 子节点状态【字段名】
     */
    keys: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      mcDataList: []
    }
  },
  mounted() {
    this.mcDataList = []
    for(let i in this.dataList) {
      let item = this.dataList[i]
      item.open = true
      this.mcDataList.push(item)
    }
  },
  methods: {
    openCategory(i) {
      let data = deepClone(this.mcDataList)
      data[i].open = !data[i].open
      this.mcDataList = []
      this.mcDataList = deepClone(data)
    },
    onChooseItem(id) {
      this.$emit("chooseItem", id)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.metaCollapse {
  width: 100%;
  height:  100%;
}
.mc_categoryArea {
  width: 100%;
  float: left;
}
.mc_dataItemArea {
  width: 100%;
  height: 100%;
  padding: 0 10px 0 20px;
  box-sizing: border-box;
}
.mc_dataItemBg {
  width: 100%;
  height: 30px;
  display: flex;
  cursor: pointer;
}
.mc_categoryTitleArea {
  width: 100%;
  box-sizing: border-box;
  padding: 0 10px;
  height: 30px;
  cursor:pointer;
  display: flex;
}
.mc_categoryTitle {
  height: 100%;
  flex: 1;
  font-size: 13px;
  line-height: 30px;
  color: #fff;
}
.mc_categoryArrowArea {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  
}
.mc_categoryArrowArea >i {
  font-size: 15px;
  color: #fff;
}
.mcDataItem_radioBtn {
  height: 100%;
  width: 30px;
}
.mcDataItem_name {
  height: 100%;
  flex: 2;
  line-height: 30px;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mcDataItem_status {
  height: 100%;
  flex: 1;
  line-height: 30px;
  font-size: 14px;
  text-align: center;
}
.mcDataItemRadio_on {
  width: 4px;
  height: 4px;
  float: left;
  margin-top: 8px;
  border: 5px solid #0ff;
  border-radius: 14px;
  background: #fff;
}
.mcDataItemRadio_off {
  width: 12px;
  height: 12px;
  float: left;
  margin-top: 8px;
  border: 1px solid #ccc;
  border-radius: 14px;
}
</style>
